<template>
  <div class="app-main-container">
    <el-form
      ref="form"
      :model="param"
      :rules="rules"
      label-suffix="："
      label-width="140px"
    >
      <el-form-item label="灰度状态" prop="status">
        <el-select v-model="param.status">
          <el-option label="部分灰度" value="1" />
          <el-option label="全量灰度" value="0" />
        </el-select>
      </el-form-item>
      <template v-if="param.status == '1'">
        <el-form-item label="灰度服务器" prop="serverId">
          <el-select v-model="param.serverId" clearable>
            <el-option
              v-for="item in serverList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="灰度商户" prop="shopIds">
          <el-select v-model="param.shopIds" multiple clearable>
            <el-option
              v-for="item in shopList"
              :key="item.shopId"
              :label="item.shopName"
              :value="item.shopId"
            />
          </el-select>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button :loading="subLoading" type="primary" @click="onSubmit"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  GrayscaleDetail,
  GrayscaleSet,
  GrayscaleShops,
  grayServerList
} from '@/api'
export default {
  data() {
    return {
      param: {
        shopIds: [],
        status: '1'
      },
      subLoading: false,
      shopList: [],
      serverList: [],
      rules: {
        status: [{ required: true, message: '请选择', trigger: 'change' }],
        shopIds: [{ required: true, message: '请选择', trigger: 'change' }],
        serverId: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  created() {
    this.initData(0)
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { param } = this
          this.subLoading = true
          GrayscaleSet({ param }).then(res => {
            this.subLoading = false
            this.$message.success('保存成功')
          }, () => {
            this.subLoading = false
          })
        }
      })
    },
    initData() {
      grayServerList({ param: {} }).then(res => {
        this.serverList = res.recordList
      })
      GrayscaleShops({ param: {} }).then(res => {
        this.shopList = res.recordList
      })
      GrayscaleDetail({ param: {} }).then(res => {
        this.param = { ...res.record }
        if (this.param.serverId) {
          this.param.serverId = this.param.serverId + ''
        }
      })
    }
  }
}
</script>

<style>
</style>
